<template>
	<view>
		<view class="app-background"></view>
		<my-navbar title="选择成员"></my-navbar>
		<view class="selectMember">
			<!-- 浮动顶部 START -->
			<view class="app-fixed">
				<view class="selectMember-notice">
					<image class="notice-icon" src="/static/notice/icon_trumpet.png"></image>
					<view>发送给全班学生的通知，1个月内新加入的成员也可以收到哦~</view>
				</view>
			</view>
			<view class="app-offset">
				<view class="selectMember-notice">
					<image class="notice-icon" src="/static/notice/icon_trumpet.png"></image>
					<view>发送给全班学生的通知，1个月内新加入的成员也可以收到哦~</view>
				</view>
			</view>
			<!-- 浮动顶部 END -->
			<template v-if="squadList.length">
				<view class="selectMember-squads">
					<view class="squad-item" v-for="(i, j) in squadList" :key="j">
						<view class="item-title">{{ `${i.gradeName}${i.squadName}班` }}</view>
						<view class="item-content">
							<view class="content-radio" @click="clickAllRadio(i)" :hover-class="i.studentList.length > 0 ? 'button-hover' : ''">
								<view class="radio-icon-container">
									<image v-if="isSelectAll(i)" class="radio-icon" src="/static/notice/icon_radio1.png"></image>
									<image v-else class="radio-icon" src="/static/notice/icon_radio0.png"></image>
								</view>
								<view class="radio-message border">
									<view class="message-label">
										<view>
											<text>全班同学</text>
											<text class="gray">（{{ i.studentList.length }}人）</text>
										</view>
									</view>
								</view>
							</view>
							<view class="content-radio" @click="clickPartRadio(i)" :hover-class="i.studentList.length > 0 ? 'button-hover' : ''">
								<view class="radio-icon-container">
									<image v-if="isSelectPart(i)" class="radio-icon" src="/static/notice/icon_radio1.png"></image>
									<image v-else class="radio-icon" src="/static/notice/icon_radio0.png"></image>
								</view>
								<view class="radio-message">
									<template v-if="isSelectPart(i)">
										<view class="message-label">
											<view>
												<text>已选择</text>
												<text class="gray">（{{ selectedList(i).length }}人）</text>
											</view>
											<view class="label-right" @click.stop="clickAlterText(i)">
												<image class="right-icon" src="/static/notice/icon_pen.png"></image>
												<text>修改</text>
											</view>
										</view>
										<view class="message-selected">
											<text v-for="(k, l) in selectedList(i)" :key="l">{{ k.childName + (l < selectedList(i).length - 1 ? '，' : '') }}</text>
										</view>
									</template>
									<template v-else>
										<view class="message-label">部分成员</view>
									</template>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 浮动底部 START -->
				<view class="app-offset">
					<view class="selectMember-button"></view>
					<safe-area></safe-area>
				</view>
				<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
					<view class="selectMember-button app-button" hover-class="hover" :class="[isPass ? '' : 'disabled']" @click="clickConfirmButton">确定</view>
					<safe-area></safe-area>
				</view>
				<!-- 浮动底部 END -->
			</template>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			squadList: []
		};
	},
	computed: {
		// 班级已选中的学生
		selectedList() {
			return squad => {
				if (!Array.isArray(squad.studentList)) this.$set(squad, 'studentList', []);
				return squad.studentList.filter(i => i.selected);
			};
		},
		// 班级未选中的学生
		unselectedList() {
			return squad => {
				if (!Array.isArray(squad.studentList)) this.$set(squad, 'studentList', []);
				return squad.studentList.filter(i => !i.selected);
			};
		},
		// 班级是否为选中“全班同学”
		isSelectAll() {
			return squad => {
				return this.unselectedList(squad).length === 0 && squad.studentList.length !== 0;
			};
		},
		// 班级是否为选中“部分同学”
		isSelectPart() {
			return squad => {
				return this.unselectedList(squad).length > 0 && this.selectedList(squad).length > 0;
			};
		},
		isPass() {
			let isPass = false;
			for (let i of this.squadList) {
				if (this.selectedList(i).length > 0) {
					isPass = true;
					break;
				}
			}
			return isPass;
		}
	},
	methods: {
		// 点击“全班同学”单选框
		clickAllRadio(squad) {
			if (squad.studentNumber === 0) {
				this.$showToast('班级没有学生无法选择');
				return;
			}
			if (this.unselectedList(squad).length) {
				this.unselectedList(squad).forEach(i => {
					this.$set(i, 'selected', true);
				});
			} else {
				this.selectedList(squad).forEach(i => {
					this.$set(i, 'selected', false);
				});
			}
		},
		// 点击“部分同学”单选框
		clickPartRadio(squad) {
			if (squad.studentNumber === 0) {
				this.$showToast('班级没有学生无法选择');
				return;
			}
			if (this.isSelectPart(squad)) {
				this.selectedList(squad).forEach(i => {
					this.$set(i, 'selected', false);
				});
			} else {
				this.clickAlterText(squad);
			}
		},
		// 点击“修改”按钮
		clickAlterText(squad) {
			uni.setStorageSync('squadData', squad);
			uni.$once('selectStudentMember', squadData => {
				const squad = this.squadList.find(i => i.id == squadData.id);
				for (let i in squad.studentList) {
					this.$set(squad.studentList[i], 'selected', squadData.studentList[i].selected);
				}
				uni.navigateBack();
			});
			uni.navigateTo({
				url: '/packageA/pages/notice/selectMember2'
			});
		},
		// 点击“确定”按钮
		clickConfirmButton() {
			if (!this.isPass) {
				this.$showToast('请选择班级成员');
				return;
			}
			uni.$emit('selectSquadMember', this.squadList);
		}
	},
	async onLoad() {
		let squadList = uni.getStorageSync('squadList') || [];
		if (squadList.length) {
			// 向页面传递成员数据时，就已存在的成员数据基础上进行操作
			this.squadList = squadList;
		} else {
			// 不向页面传递成员数据时，生成新的成员数据以进行后续操作
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.user.get_squad_list();
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '获取班级数据失败');
				return;
			}
			squadList = res1.result;
			for (const i of squadList) {
				let res;
				try {
					res = await this.$api.notice.get_student_member(i.squad);
					i.studentList = res.result || [];
				} catch (err) {
					i.studentList = [];
				}
			}
			this.squadList = squadList;
			uni.hideLoading();
		}
	},
	onUnload() {
		uni.clearStorageSync('squadList');
		uni.$off('selectSquadMember');
	}
};
</script>

<style lang="less" scoped>
.selectMember-notice {
	height: 80rpx;
	background-color: #fff6e6;
	padding: 20rpx 30rpx;

	font-size: 28rpx;
	color: #222222;

	display: flex;

	.notice-icon {
		width: 35rpx;
		height: 28rpx;
		margin-top: 6rpx;
		margin-right: 20rpx;
	}
}

.selectMember-squads {
	.squad-item {
		.item-title {
			font-size: 32rpx;
			color: #707070;
			padding: 0 30rpx;
			padding-top: 30rpx;
			padding-bottom: 20rpx;
		}

		.item-content {
			background-color: #ffffff;

			.content-radio {
				display: flex;
				transition: all 0.3s;

				.radio-icon-container {
					margin: 40rpx 30rpx;

					.radio-icon {
						width: 42rpx;
						height: 42rpx;
					}
				}

				.radio-message {
					width: 100%;

					padding: 40rpx 0;
					padding-right: 30rpx;

					&.border {
						border-bottom: 2rpx solid #e3e4e6;
					}

					.message-label {
						font-size: 32rpx;
						color: #222222;

						display: flex;
						align-items: center;
						justify-content: space-between;

						.gray {
							color: #999999;
						}

						.label-right {
							font-size: 28rpx;
							color: #707070;

							display: flex;
							align-items: center;

							.right-icon {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						}
					}
				}

				.message-selected {
					font-size: 28rpx;
					color: #999999;
					margin-top: 30rpx;
				}
			}
		}
	}
}

.selectMember-button {
	height: 88rpx;
	border-radius: 44rpx;
	background-color: #ff6600;
	margin: 0 30rpx 30rpx 30rpx;

	position: relative;

	font-size: 36rpx;
	color: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
